<template>
	<div class="shopCard">
		<shopperCardHeader :info="info" />
		<div class="u-m-t-20">
			<p class="u-col-center">
				<u-tag :text="getNewsInfo.tag" class="u-m-r-10" type="warning" mode="dark" size="mini" />
				{{getNewsInfo.content}}
			</p>
			<div class="mediaBox u-flex u-flex-wrap u-m-t-10">
				<block v-for="(imgA,index) in getSwiperImgsList" class="item" :key="index">
					<u-image class="u-m-5 previewImg" :src="imgA" width="223" height="223" @click="openSwiper(index)">
					</u-image>
				</block>
			</div>
		</div>

		<div class="u-flex u-row-between u-m-t-20">
			<span :style="{color:$u.color['tipsColor']}" class="u-font-xs">阅读{{getNewsInfo.read_num}} </span>
			<div class="u-font-xs u-m-r-30 ">
				<div>
					<u-icon name="thumb-up" color="#333" size="28"></u-icon>
					<span>点赞 {{getNewsInfo.praise_num}}</span>
				</div>
			</div>
		</div>
		<slot></slot>
		<div class="swiperModal" v-if="isOpenSwiper">
			<u-icon name="close" color="#f5f5f5" size="38" class="closeBtn" @click="closeSwiper"></u-icon>
			<div class="head u-flex u-p-30">
				<u-avatar :src="getShopInfo.shop_logo" :show-level="getShopInfo.shop_level>0" size="mini"></u-avatar>
				<div class="headTop u-m-l-15">
					<h4 class="u-line-2">{{getShopInfo.shop_name}}</h4>
					<p class="u-font-xs">{{getShopInfo.shop_desc}}</p>
				</div>
			</div>
			<swiper class="swiperWrap" :current="swiperCurrent" @change="swiperChange($event)">
				<swiper-item v-for="(item,index) in getSwiperImgsList" :key="index">
					<view class="swiper-item">
						<u-image :src="item" width="100%" height="900"></u-image>
					</view>
				</swiper-item>
			</swiper>
			<div class="swiperBottom u-flex u-row-between">
				<miniShopCard :shop="swiperCurrentItem" />
				<div v-if="false">
					<u-icon name="thumb-up-fill" color="#fff" size="48" label="225" label-color="#fff" label-size="24"
						label-pos="bottom" margin-top="20"></u-icon>
				</div>
			</div>
		</div>


	</div>
</template>

<script>
	import shopperCardHeader from "@/components/shopperCardHeader";
	import miniShopCard from "@/components/miniShopCard";

	export default {
		name: "shopperCard",
		computed: {
			getNewsInfo() {
				return this.info.news_info
			},
			getShopInfo() {
				return this.info.shop_info
			},
			getSwiperImgsList() {
				return this.getNewsInfo.resour_list.map(res => res.goods_img)
			}
		},
		data() {
			return {
				isOpenSwiper: false,
				swiperCurrentItem: {},
				swiperCurrent: 0
			}
		},
		props: {
			info: {
				type: Object,
				default: () => {
					{}
				}
			},

		},

		mounted() {

		},
		methods: {
			closeSwiper() {
				this.isOpenSwiper = false
				uni.showTabBar()

			},
			swiperChange(e) {
				let index = e.detail.current

				this.$set(this, 'swiperCurrentItem', this.getNewsInfo.resour_list[index])
			},
			openSwiper(index) {
				this.isOpenSwiper = true
				this.swiperCurrent = index
				this.$set(this, 'swiperCurrentItem', this.getNewsInfo.resour_list[index])
				uni.hideTabBar()
			},
			preView(list, index) {
				uni.previewImage({
					urls: list,
					current: index,
					success: () => {

					},
					complete: () => {

					}
				})
			},
		},
		components: {
			shopperCardHeader,
			miniShopCard
		}
	}
</script>

<style lang="scss">
	@import '~uview-ui/index.scss';

	.shopCard {
		background-color: #fff;
		margin: 15upx;
		padding: 20upx 14upx;
		border-radius: 20upx;
	}

	.mediaBox {
		border-radius: 14upx;
		overflow: hidden;

		.item {
			width: 32%;
		}

		.previewImg {
			&:nth-child(1) {
				border-top-left-radius: 18upx !important;
				overflow: hidden !important;
			}

			&:last-child {
				border-bottom-right-radius: 18upx !important;
				overflow: hidden !important;
			}
		}


	}

	.bottomWrap {
		padding: 20upx 0;
		font-size: 24upx;
		color: #999;
	}

	.swiperModal {
		background-color: #000;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99999;

	}

	.swiperWrap {

		height: 100%;
		width: 100%;
		margin-top: 100upx;
	}

	.head {
		color: #fff;
		margin-top: var(--status-bar-height);
	}

	.closeBtn {
		position: fixed;
		top: 60upx;
		/*  #ifdef  APP-PLUS */
		top: 140upx;
		/*  #endif  */

		right: 30upx;
	}

	.swiperBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30upx;
	}
</style>
